
<template>
  <el-dialog :title="title" :width="width" :visible.sync="isShowDialog" :close-on-click-modal="false" :append-to-body="true">
    <p>{{address}}</p>
    <div class="amap-page-container">
      <input  type="text" class="search-input" id="search">
      <el-amap 
        :vid=" field+ '_'+formTypeProp" 
        :zoom="zoom" 
        class="amap-demo" 
        :center="center"
        :amapManager="amapManager"
        :events="events"
        >
      </el-amap>
    </div>
    <ul class="amap-result-ul">
      <li class="amap-result-li" v-for="item in result" :key="item.id" @click="tapAddrList(item)">
          <div class="name">{{item.name}}</div>
          <div class="addr">{{item.address}}</div>
      </li>
    </ul>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<style scoped>
.amap-page-container {height: 300px;position: relative;}
.amap-result-ul{list-style: none;height:300px;overflow: auto;}
.amap-result-li{border-bottom:1px solid #eee;padding:10px;}
.amap-result-li:hover{background: #F2F6FC;cursor:pointer;}
.amap-result-li .addr {color:#999;padding-top:10px;font-size:13px;}
.search-input{border: 1px solid red;position: absolute;z-index: 5;width: 80%;left: 10%;padding: 5px;}
.toolbar{margin-top: 15px;}
.dialog-footer{display: flex;justify-content: flex-end;}
</style>
<script>
  import {AMapManager} from "vue-amap"
  let amapManager=new AMapManager();
  export default {
    name:'mapGaoDe',
    props:{
      formTypeProp:{
        type:String,
        default(){
          return 'add';
        }
      },
      field:{
        type:String,
        default(){
          return 'add';
        }
      },
      width:{
        type:String,
        default(){
          return '500px';
        }
      },
      title:{
        type:String,
        default(){
          return '选择地址';
        }
      }
    },
    created(){
       
    },
    data() {
      let vm = this;
      return {
        returnField:'',
        isShowDialog:false,
        zoom:16,//缩放等级
        center: [0,0],//当前中心点的坐标
        result:[],
        addrData:{},
        address:"",
        amapManager,
        map:null,
        events:{
          init(o){
            vm.map=o;
            /*//方法一,但是没法添加当前位置的组件
            AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
              var positionPicker = new PositionPicker({
                mode: 'dragMap',
                map: o
              });
      
              positionPicker.on('success', function(positionResult){
                console.log(positionResult);
                vm.result=positionResult.regeocode.pois;
                vm.address=positionResult.regeocode.formattedAddress;
                vm.addrData = {
                  address:positionResult.address,
                  lng_gd:positionResult.position.lng,
                  lat_gd:positionResult.position.lat
                }
                //vm.center=[positionResult.position.lng,positionResult.position.lat]
              })
              positionPicker.start();
            })*/
          }
        }
      };
    },
    watch:{
      map:function(){
        if(this.map!=null){
          this.startDrag();
        }
      }
    },
    methods:{
      submit(){
        this.$emit('pickAddress',this.returnField,this.addrData);
        this.close();
      },
      open(returnField,value = {}){
        this.returnField = returnField;
        this.isShowDialog = true;
        
        if (value.lng_gd && value.lat_gd) {
          this.addrData = {
            address:value.address,
            lng_gd:value.lng_gd,
            lat_gd:value.lat_gd
          };
          this.address = value.address;
          this.center = [value.lng_gd,value.lat_gd];
        }
         //启用搜索
        this.$nextTick(()=>{
          this.startSearch();
        })
        
      },
      close(){
        this.isShowDialog = false;
      },
      startDrag(){//方法二
        
        let vm=this;
        let map=this.amapManager.getMap();
        AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
          var positionPicker = new PositionPicker({
              mode: 'dragMap',
              map: map
          });
          //定位
          let geolocation;
          map.plugin('AMap.Geolocation', function () {
            geolocation=new AMap.Geolocation({
              showButton: true,        //显示定位按钮，默认：true
              showMarker: false,        //定位成功后在定位到的位置显示点标记，默认：true
              extensions:'all'
            })
            if (vm.center[0] == 0 && vm.center[1] == 0) {
              map.addControl(geolocation);
              geolocation.getCurrentPosition();
              AMap.event.addListener(geolocation, 'complete', function(data){
                positionPicker.start();
              });
            } else {
              map.addControl(geolocation);
              positionPicker.start();
            }
            
            /*
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', function(data){
              positionPicker.start();
            });*/
            /*
            if (this.center.length < 2) {
              geolocation.getCurrentPosition();
              AMap.event.addListener(geolocation, 'complete', function(data){
                positionPicker.start();
              });
            } else {
              positionPicker.start();
            }*/
          })
          
          positionPicker.on('success', function(positionResult){
            vm.result=positionResult.regeocode.pois;
            if (positionResult.position.lng != vm.addrData.lng_gd || positionResult.position.lat != vm.addrData.lat_gd){
              vm.addrData = {
                address:positionResult.address,
                lng_gd:positionResult.position.lng,
                lat_gd:positionResult.position.lat
              }
              vm.address=positionResult.regeocode.formattedAddress;
            }
            
            //vm.center=[positionResult.position.lng,positionResult.position.lat];//如果用了这个 会无限触发获取定位
          })
          /*
          positionPicker.on('fail', function(failResult){
            console.log(failResult)
          })*/
          // positionPicker.start();
        })
      },
      startSearch() {
        let vm=this;
        let map=this.amapManager.getMap();
        AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
          var poiPicker = new PoiPicker({
              input: 'search', //输入框id
              
          });
          //监听poi选中信息
          poiPicker.on('poiPicked', function(poiResult) {
            //用户选中的poi点信息
            vm.center=[poiResult.item.location.lng,poiResult.item.location.lat]
          });
        });
      },
      tapAddrList(item){
        this.addrData = {
          address:item.address,
          lng_gd:item.location.lng,
          lat_gd:item.location.lat
        }
        this.address = item.address;
        this.center=[item.location.lng,item.location.lat];
      }
    }
  };
</script>
